<template>   
  <el-row>   
    <el-col :span="8" :offset="16" style="text-align:right;">   
      <!-- el-badge可以在按钮上做标记，显示信息数量 -->   
      <el-badge :value="2" type="warning" class="my-msg">   
        <el-button size="small">消息</el-button>   
      </el-badge>   
      <!-- el-dropdown实现下拉选项 -->   
      <el-dropdown>   
         <el-avatar :size="50"   
      src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"> 
         </el-avatar>   
         <el-dropdown-menu slot="dropdown">   
           <el-dropdown-item @click.native="logout">注销</el-dropdown-item>   
         </el-dropdown-menu>   
       </el-dropdown>   
     </el-col>   
   </el-row>   
 </template>   
 <script>   
   export default {   
     name : "TopHeader",   
     methods:{   
       logout(){   
         alert("执行注销");   
       }   
     }   
   }   
 </script>   
 <style>   
   .my-msg {   
     margin-top: -30px;   
     margin-right: 20px;   
   }   
</style>   